<script setup lang="ts">
import EChart from "~/contentScripts/views/echart.vue";
import Trans from "~/utils/sycm/trans";

const props = defineProps({
  data: {
    type: Object,
  },
  date: {
    type: String,
  },
  showZs: {
    type: Boolean,
    default: true,
  },
});
// Echart曲线图配置
const chartOptions = ref<any>({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {
        title: '保存为图片',
        name: '市场-行业客群-购买偏好-下单及支付时段偏好',
      }
    }
  },
  legend: {
    data: ['支付买家数']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
      '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
      '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
      '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '支付买家数',
      type: 'line',
      smooth: true,
      data: []
    },
  ],
});
const getData = () => {
  const data: any = props.data;
  let key: string = 'sycm-mc-mq-industry-customer-payment-period-preference';
  return [...data[key].trendData.data.payByrCntIndex];
}
const calcTreeData = () => {
  const arr: any[] = [];
  const treeData = getData();
  if (props.showZs) {
    chartOptions.value.legend.data = ['客群指数'];
    chartOptions.value.series[0].data = treeData;
    chartOptions.value.series[0].name = '客群指数';
  } else {
    chartOptions.value.legend.data = ['支付买家数'];
    chartOptions.value.series[0].name = '支付买家数';
    chartOptions.value.series[0].data = treeData.map((item: any) => {
      return Trans.number(item).toFixed(0);
    });
  }
  dataSource.value = arr;
};
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const calcTableData = () => {
  loading.value = true;
  columns.value = [
    {
      dataIndex: 'date',
      title: '日期',
      sorter: (a: any, b: any) => a.date - b.date,
    },
    {
      dataIndex: 'time',
      title: '时段',
      sorter: (a: any, b: any) => parseInt(a.time) - parseInt(b.time),
    },
    {
      dataIndex: 'value',
      title: props.showZs ? '客群指数' : '支付买家数',
      sorter: (a: any, b: any) => a.value - b.value,
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        if (props.showZs) {
          return text;
        } else {
          let amount;
          amount = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
    },
    {
      dataIndex: 'cate',
      title: '类目',
    }
  ];
  const arr: any[] = [];
  const treeData = getData();
  let times = [
    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
    '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
    '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
    '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
  ];
  const cateName = document.querySelector(".ebase-FaCommonFilter-module__left a.common-picker-header")?.getAttribute('title');
  treeData.forEach((item: any, index: number) => {
    arr.push({
      date: props.date,
      time: times[index],
      value: item,
      cate: cateName,
    })
  })
  dataSource.value = arr.reverse();
  loading.value = false;
}
const loading = ref<boolean>(false);
const calc = () => {
  calcTreeData();
  calcTableData();
}
onMounted(() => {
  calc()
})
watch(() => props.data, (val) => {
  if (val) {
    calc()
  }
});
watch(() => props.showZs, () => {
  calc()
});
watch(() => props.date, () => {
  calc()
});
</script>

<template>
  <EChart :options="chartOptions" style="height: 300px;"/>
  <a-divider/>
  <base-table :columns="columns" :loading="loading" :scroll="{
    y: 'calc(100vh - 580px)'
  }" :data-source="dataSource" table-name="市场-行业客群-购买偏好-下单及支付时段偏好"/>
</template>

<style scoped>

</style>
